<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="../vue.js"></script>
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- 使用v-show做条件渲染 -->
        <!-- 本质是display:none隐藏 -->
        <!-- <h1 v-show="a">今天周六,回家睡觉</h1>
        <button @click="change">带你玩</button> -->

         <!-- 使用v-if做条件渲染 -->
         <!-- 整个dom结构直接没了,开销肯定比v-show大 -->
        <!-- <h1 v-if="a">今天周六,回家睡觉</h1> -->
        <button data-value="1" @click="change">Angular</button>
        <button data-value="2" @click="change">React</button>
        <button data-value="3" @click="change">Vue</button>
        <!-- 下面是展示区 -->
          <div v-show="isShow==1">Angular123</div>
          <div v-show="isShow==2">React12312</div>
          <div v-show="isShow==3">Vue23213</div>
          
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data:{
              isShow:1,
            },
            methods:{
                change(e){
                    //console.log(e.target.dataset);
                    this.isShow =e.target.dataset.value;
                },
            },
            // data: {
            //     flag: true,
            // },
            // methods: {
            //     change() {
            //         this.flag = !this.flag;
            //     }
            // },


        });
    </script>
</body>

</html>